<template>
  <a-space direction="vertical" :size="12">
    <a-range-picker
        v-model:value="props.value"
        style="width: 400px"
        format="YYYY/MM/DD HH:mm:ss"
        :showTime="props.showTime"
        :presets="rangePresets"
        @change="onRangeChange"
        :disabledDate="props.disabledDate"
    />
  </a-space>
</template>
<script lang="ts" setup>
import dayjs, {Dayjs} from 'dayjs'
import {ref} from 'vue'

type RangeValue = [Dayjs, Dayjs]
// const props = defineProps<{
//   time: RangeValue | [] | null
// }>()
const props = defineProps({
  value: {
    type: Array,
    default: () => [],
  },
  disabledDate: {
    type: Function,
    default: () => {
    },
  },
  showTime: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(['update:value'])


// const time = ref<RangeValue>([
//   dayjs('2024/01/04 18:04:41'),
//   dayjs('2024/01/04 18:04:41'),
// ])

console.log('modelValue+++++++++++', props)

const onRangeChange = (dates: RangeValue, dateStrings: string[]) => {
  console.log('xxxxx')
  emits('update:value', dates)
  // if (dates) {
  //   console.log('From: ', dates[0], ', to: ', dates[1])
  //   console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
  //   // console.log(time.value, 'tiome')
  // } else {
  //   console.log('Clear')
  // }
}

const presets = ref([
  {label: 'Yesterday', value: dayjs().add(-1, 'd')},
  {label: 'Last Week', value: dayjs().add(-7, 'd')},
  {label: 'Last Month', value: dayjs().add(-1, 'month')},
])

const rangePresets = ref([
  {label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()]},
  {label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()]},
  {label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()]},
  {label: 'Last 90 Days', value: [dayjs().add(-90, 'd'), dayjs()]},
])
</script>
